<template>
  <div>
    <!-- 正版 -->
    <ul class="insure-wrap">
      <li class="item">
        <div class="title">100%正版保证</div>
        <p>自有制作团队原创</p>
        <p>坚决打击盗版素材</p>
        <p>人工审核AI辅助筛选图片精准</p>
        <p>版权保障</p>
        <p>最高至全额赔偿</p>
      </li>
      <li class="item">
        <div class="title">灵活授权</div>
        <p>多账户管理</p>
        <p>灵活授权和结算周期</p>
        <p>RF授权模式全球永久使用授权</p>
        <p>方便、快速、高效</p>
      </li>
      <li class="item">
        <div class="title">一站式购买</div>
        <p>视频\图片一站式购买</p>
        <p>方便、快速、高效</p>
        <p>专职客户经理提供服务</p>
        <p>海量素材库</p>
        <p>每日新增50000张</p>
      </li>
      <li class="item">
        <div class="title">性价比高</div>
        <p>不同于常规及传统的摆拍形式</p>
        <p>还原自然与真实</p>
        <p>让艺术与商业交互融合</p>
        <p>企业用途价格低至个位数</p>
      </li>
    </ul>
    <!-- 关于 -->
    <ul class="about center">
      <li class="item">
        <p>关于图蜗</p>
        <a href="#">关于我们</a>
        <a href="#">授权协议</a>
        <a href="#">私隐政策</a>
      </li>
      <li class="item">
        <p>常见问题</p>
        <a href="#">套餐价格</a>
        <a href="#">关于套餐</a>
        <a href="#">关于账户</a>
        <a href="#">下载问题</a>
        <a href="#">流程问题</a>
      </li>
      <li class="item">
        <p>企业级应用</p>
        <a href="#">影视广告</a>
        <a href="#">短视频</a>
        <a href="#">视觉设计</a>
        <a href="#">平面拍摄</a>
        <a href="#">活动视频</a>
      </li>
      <li class="item">
        <p>联系我们</p>
        <a href="#">邮箱：Turawstock@163.com</a>
        <a href="#">商务合作QQ： 3499206090</a>
        <a href="#">客服电话： 400-6181-322</a>
      </li>
      <li class="item">
        <el-button>在线客服</el-button>
        <el-button>卖图上传</el-button>
        <el-button>商务合作</el-button>
      </li>
    </ul>
    <div class="copyrihgt">
      Copyright @ 2019 广州大片信息科技有限公司 All right . 粤ICP备19130988号
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.insure-wrap {
  display: flex;
  justify-content: space-around;
  padding: 60px 5% 30px;
  background-color: #fff;
  margin-top: 20px;
  .item {
    .title {
      font-size: 24px;
      line-height: 2;
      margin: 10px 0;
    }
    p {
      font-size: 15px;
      color: #989999;
      line-height: 1.5;
    }
  }
}
.about {
  display: flex;
  justify-content: space-between;
  padding-top: 60px;
  .item {
    p {
      font-size: 14px;
      color: #000;
      padding-bottom: 15px;
    }
    a {
      display: flex;
      font-size: 14px;
      color: #333;
      line-height: 2;
      &:hover {
        color: #c9c9c9;
      }
    }
    &:last-child {
      width: 20%;
      button {
        width: 143px;
        height: 42px;
        border-color: #000;
        color: #000;
        &:hover {
          color: $mainColor;
          border-color: $mainColor;
        }
      }
      button:first-child {
        background-color: $mainColor;
        border-color: #ffebcd;
        &:hover {
          color: #fff;
          background-color: #42ab9e;
        }
      }
    }
  }
}
.copyrihgt {
  margin: 20px 5% 0;
  padding: 10px;
  border-top: 1px dotted #000;
  text-align: center;
  font-size: 14px;
}
.el-button {
  display: block;
  margin-bottom: 20px;
}
.el-button + .el-button {
  margin-left: 0;
}
</style>
